<template lang="pug">
  .bill-table.time-search
    Modal.lzw-modal-style-1(
      width="1200"
      v-model="isShowTableMingxihuizongModal"
      title="明细汇总"
      class-name="vertical-center-modal"
      footer-hide
      fullscreen
    )
      .search-form
        Row(type="flex" justify="start" :gutter="16")
          Col.mb-15(span="5")
            span 参保编号：
            Select.has-border(v-model="ignoreInsureNo" placeholder="请选择显示或隐藏" @on-change="query")
              Option(v-for="(c_item, c_index) of arrListDown.ignoreInsureNoOps" :key="c_index" :value="c_item.value") {{c_item.label}}
          Col.mb-15(span="8") 
            span 参保月份：
            DatePicker.has-border(:value="startDate" placeholder="开始日期" type="month" @on-change="handleChangeDatePicker('startDate', $event)" style="width:200px")
            span.pl-10.pr-10.line-h-32 --
            DatePicker.has-border(:value="endDate" placeholder="结束日期" type="month" @on-change="handleChangeDatePicker('endDate', $event)")
          Col.mb-15(span="5")
            span 导出方式：
            Select.has-border(v-model="billExportSort" placeholder="请选择导出方式" )
              Option(v-for="(c_item, c_index) of arrListDown.billExportSortOps" :key="c_index" :value="c_item.key") {{c_item.value}}
          Col.mb-15(span="6")
            span 账单月份：
            Input.has-border(:value="zdMonth" readonly)
            //- .has-border(style="width: 100%; height: 36px") {{year}}年{{month}}月
          Col.mb-15(span="5")
            span 单位名称：
            Input.has-border(:value="companyName" readonly)
          Col.mb-15(span="5")
            span 身份证号：
            Input.has-border(v-model="idCardNo")
          Col.mb-15(span="5")
            span 是否隐藏参保月份：
            Select.has-border(v-model="ignoreYearMonth" placeholder="请选择显示或隐藏" @on-change="query")
              Option(v-for="(c_item, c_index) of arrListDown.ignoreYearMonthOps" :key="c_index" :value="c_item.value") {{c_item.label}}
          Col.mb-15(span="1")
          Button(type="info" @click="query") 查询
          Col.mb-15(span="24" style="justify-content: flex-end;")
            Button.pull-right( type="info" @click="exportALLDetailTotalCaiZhi") 导出精简版
            Button.pull-right.ml-10(type="info" @click="exportALLDetailTotal") 导出
            Button.pull-right.ml-10(type="info" @click="exportALLDetailTotalPDFCaiZhi") 导出精简版PDF
            Button.pull-right.ml-10(type="info" @click="exportALLDetailTotalPDF") 导出PDF

      Table.beautiful-table.time-search.complex-table(:columns="thead" :data="tableData" ref="table")
        //- .clearfix.font-14(slot="header")
        //-   Row
        .clearfix.pl-20.pr-20(slot="footer")
          Page(
            :current="tableComone.pageIndex"
            :total="tableComone.totalRows"
            @on-change="onChangePage"
            @on-page-size-change="onpageSizeChange"
            show-sizer
            show-total
            placement="top"
            prev-text="上一页"
            next-text="下一页"
            :page-size-opts="[10, 20, 30, 50, 100]"
          )

      Row.mt-20.line-h-34.font-14
        Col(span="8" v-for="item in formItem")
          span {{item.text}}：
          span.text-error.font-weight {{item.value}}

</template>

<script>
import { tableMingxihuizongThead } from './modalTableHead.js'
import _cloneDeep from 'clone-deep'
import Mixin from '../modalMixin/tableMingxihuizongModalMixin.js'
import config from '@/config'
const proModel = process.env.NODE_ENV === 'development' ? config.proModel.dev : config.proModel.pro

export default {
  name: '',

  mixins: [Mixin],

  data () {
    return {
      thead: _cloneDeep(tableMingxihuizongThead),
      proModel: proModel
    }
  },
  computed: {
    zdMonth () {
      return this.year + '年' + this.month + '月'
    },
    isCaizhi () {
      return this.proModel === 'CAIZHI' ? true : false
    }
  },

  watch: {
  },

  mounted () {
    this.companyId = this.$route.query.companyId
  },

  methods: {
  }
}
</script>

<style lang="less" scope>
  .time-search{
    .ivu-table .ivu-table-title{
      height: 100px;
    }
  }
</style>
